import { ref } from "vue"
import { useIntersectionObserver } from "@vueuse/core"
/**
 * 数据懒加载
 * @param {Function} apiFn  API函数
 */
export const useLazyData = (apiFn) => {
    const result = ref([])
    const currentViewDom = ref(null)
    // stop停止观察
    const { stop } = useIntersectionObserver(
        // 监听的目标元素
        currentViewDom,
        ([{ isIntersecting }], observerElement) => {
            // isIntersecting 是否进入可视区域
            if (isIntersecting) {
                stop()
                apiFn().then(res => {
                    result.value = res.result
                })
            }
        },
        // 配置项
        {
            threshold: 0 // 容器和可视区交叉的占比（进入的面积/容器完整面试） 取值，0-1 之间，默认比0大，所以需要滚动较多才能触发进入可视区域事件。
        }
    )
    return { result, currentViewDom }
}